import { Typography } from 'antd';

// 标题组件
export const Heading = ({ level = 2, children, style }) => {
    const fontSizeMap = {
        1: '2rem',
        2: '1.75rem',
        3: '1.5rem',
        4: '1.25rem',
    };

    return (
        <Typography.Title
            level={level}
            style={{
                fontFamily: "'STXingkai', cursive",
                color: '#2c3e50',
                fontWeight: 500,
                fontSize: fontSizeMap[level],
                ...style,
            }}
        >
            {children}
        </Typography.Title>
    );
};

// 段落组件
export const Paragraph = ({ children, className }) => (
    <Typography.Paragraph
        style={{
            fontSize: '1.1rem',
            lineHeight: 1.8,
            marginBottom: '1.5rem',
            textIndent: '2em',
        }}
        className={className}
    >
        {children}
    </Typography.Paragraph>
);

// 列表组件
export const List = ({ data }) => {
    return (
        <ul style={{ listStyleType: 'disc', paddingLeft: '2em', marginBottom: '1.5rem' }}>
            {data.map((item, index) => (
                <li key={index} style={{ fontSize: '1.1rem', lineHeight: 1.8 }}>
                    {item}
                </li>
            ))}
        </ul>
    );
};
